<template>
  <el-form
    :model="employee"
    ref="formRef"
    size="large"
    :rules="rules"
    label-width="100px"
  >
    <el-form-item label="数据集名称" prop="trainingName">
      <el-input
        v-model="employee.trainingName"
        class="w-40"
        placeholder="请输入数据集名称"
      ></el-input>
    </el-form-item>
    <el-form-item label="数据集标签" prop="category">
      <el-select
        v-model="employee.category"
        filterable
        :disabled="RestrictedModification"
        placeholder="请选择数据集标签"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.value"
          :value="item.value"
        />
      </el-select>
    </el-form-item>

    <el-form-item label="数据集备注">
      <el-input
        v-model="employee.rem"
        maxlength="50"
        placeholder="请输入数据集备注"
        show-word-limit
        type="textarea"
      />
    </el-form-item>
  </el-form>
</template>
<script setup>
/**
 *
 */
import { reactive, ref, onMounted } from "vue";

/**
 *
 */
const { id, trainingName, category, rem } = defineProps({
  id: {
    type: Number,
  },
  trainingName: {
    type: String,
    default: "",
  },
  category: {
    type: String,
    default: "",
  },
  rem: {
    type: String,
    default: "",
  },
});
/**
 *
 */
const formRef = ref();
/**
 * 限制修改
 */
const RestrictedModification = ref(false);
/**
 * 标签
 */
const options = [
  {
    value: "稻谷",
  },
  {
    value: "糙米",
  },
  {
    value: "精米",
  },
  {
    value: "玉米",
  },
  {
    value: "小麦",
  },
  {
    value: "大豆",
  },
];

/**
 *
 */
const rules = {
  trainingName: {
    required: true,
    message: "请输入数据集名称",
    trigger: "blur",
  },
  category: {
    required: true,
    message: "请选择数据集标签",
    trigger: "blur",
  },
};

/**
 * 训练集实体
 */
const employee = reactive({
  id,
  trainingName,
  category,
  rem,
});

/**
 * 生命周期
 */
onMounted(() => {
  if (employee.id > 0) {
    RestrictedModification.value = true;
  }
});

/**
 *
 */
defineExpose({
  validate: async function () {
    return formRef.value.validate();
  },
  reset: async function () {
    return formRef.value.resetFields();
  },
  employee,
});
</script>
